<template>
	<view class="p-20px mb-20px bg-white rounded-20px" v-for="(item,index) in state" :key="index">
		<view class="title flex flex-x-between">
			<view class="flex flex-x-between flex-y-center">
				<uv-avatar :src="item.src"></uv-avatar>
				<text class="ml-10px">{{item.name}}</text>
			</view>
			<view v-if="item?.tags && item?.tags.length" class="flex flex-y-center">
				<view v-for="itemTag in item.tags" :key="itemTag" class="mr-10px">
					<uv-tags :text="itemTag.text" :type="itemTag.type" shape="circle" size="mini"></uv-tags>
				</view>
			</view>
		</view>
		<uv-line margin="20rpx 0"></uv-line>
		<slot :data="item"></slot>
	</view>
</template>

<script setup name="ColorfulCard">
	import {
		computed
	} from 'vue';

	const emit = defineEmits(['update:modelValue'])

	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({}),
		}
	})

	const state = computed({
		get() {
			return props.modelValue
		},
		set(value) {
			emit('update:modelValue', value)
		},
	})
</script>

<style lang="scss">
</style>